<template>
   <div class="ft">
        <router-link v-for="(item) in navtype" :key="item.id" :to="item.url">
            <svg class="icon" aria-hidden="true">
                <use :xlink:href="`#icon-${item.icon}`"></use>
            </svg>
           {{ item.name }}
          
        </router-link>
       
    </div>  
        
</template>
<script>
export default {
    name:"footerCom",
    data(){
        return {

           
            navtype:[
                {id:1,name:'商品',url:'/home',icon:'yiliaohangyedeICON-'},
                // {id:2,name:'分类',url:'/cate',icon:'fenlei'},
                {id:3,name:'购物车',url:'/cart',icon:'gouwuchekong'},
                // {id:4,name:'我的',url:'/my',icon:'wode'},
            ]
        }
    }
}
</script>
<style>
.ft{
    width: 100%;
    height: .44rem;
    position: absolute;
    left:0px;
    bottom:0px;
    display: flex;
}
.ft>a{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.active{
    color:#0ff;
}
    
</style>